<template>
  <Map class="map"></Map>
  <div class="contain">
    <ComForm
      ref="formRef"
      :format="format"
      @submit="submit"
      @reset="reset"
    ></ComForm>
    <ComTable
      ref="tableRef"
      :column="column"
      :api="representative"
      :where="where"
      :isSelection="true"
      @del="del"
      @examine="examine"
      @clone="clone"
    ></ComTable>
  </div>
  <Pop ref="popRef" width="1000px" @confirm="confirm" :showFooterBtn="false">
    <fixForm v-if="taskType == '管道修复任务'"></fixForm>
    <illegalForm v-if="taskType == '违法任务'"></illegalForm>
    <dailyMaintenance
      ref="dailyMaintenanceRef"
      v-if="taskType == '日常维护任务'"
    ></dailyMaintenance>
    <clear v-if="taskType == '清掏任务'"></clear>
  </Pop>
</template>
  <script setup  lang="ts">
import { onMounted, ref, nextTick, h } from "vue";
import { initMap, map } from "@/utils/map";
import { listPost } from "@/api/system/post";
import fixForm from "./fixForm.vue";
import illegalForm from "./illegalForm.vue";
import dailyMaintenance from "./dailyMaintenance.vue";
import clear from "./clear.vue";
import { ElButton, ElTag } from "element-plus";
import { representative } from "@/api/task/task";

const { proxy } = getCurrentInstance();
console.log(222, getCurrentInstance());

const dailyMaintenanceRef = ref();
const taskType = ref();
const mapRef = ref(null);
const popRef = ref(null);
const editFormRef = ref(null);
//表格相关配置
const tableRef = ref();
let column = ref([
  {
    label: "任务名称",
    prop: "taskName",
  },
  { label: "任务编号", prop: "taskNo" },
  { label: "执行人", prop: "executePersonName" },
  { label: "工作区域", prop: "area" },
  {
    label: "时间",
    prop: "postSort",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return row.startTime + "~" + row.endTime;
    },
  },
  {
    label: "任务类型",
    prop: "type",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return row.type === 1
        ? "清掏任务"
        : row.type === 3
        ? "管道修复任务"
        : row.type === 2
        ? "日常维护任务"
        : row.type === 4
        ? "违法任务"
        : null;
    },
  },
  {
    label: "等级",
    prop: "grade",
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      if (!row.grade) {
        return null;
      }
      return h(
        ElTag,
        {
          type:
            row.grade === 1
              ? "danger"
              : row.grade === 2
              ? "warning"
              : row.grade === 3
              ? "success"
              : row.grade === 4
              ? "info"
              : "default",
        },
        row.grade === 1
          ? "紧急"
          : row.grade === 2
          ? "高"
          : row.grade === 3
          ? "中"
          : row.grade === 4
          ? "低"
          : null
      );
    },
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "操作",
    width: 240,
    btns: [
      {
        title: "审核",
        disabled: (data) => (data.postCode == 1 ? true : false),
        event: "examine",
      },
      {
        title: "催办",
        disabled: (data) => (data.postCode == 1 ? true : false),
        event: "del",
      },
      {
        title: "流程图",
        disabled: (data) => (data.postCode == 1 ? true : false),
        event: "clone",
      },
    ],
  },
]);
const where = ref({});
const examine = (e) => {
  taskType.value =
    e.type === 1
      ? "清掏任务"
      : e.type === 2
      ? "日常维护任务"
      : e.type === 3
      ? "管道修复任务"
      : "违法任务";
  popRef.value.show();
  nextTick(() => {
    dailyMaintenanceRef.value.Feedback(e);
  });
};
const del = (e) => {
  proxy.$modal.confirm("是否删除该任务?");
  // .then(function () {})
  // .then(() => {
  //   proxy.$modal.msgSuccess("删除成功");
  // })
  // .catch(() => {});
};
const getSelectionRows = () => {
  console.log(tableRef.value.getSelectable());
};
const clone = (data) => {};
// 表单相关配置
const format = ref([
  {
    label: "任务名称",
    prop: "taskName",
    type: "input",
    span: 5,
  },
  {
    label: "执行人",
    prop: "executePersonName",
    type: "input",
    span: 5,
  },
  {
    label: "任务类型",
    prop: "type",
    type: "select",
    option: [
      { label: "清掏任务", value: 1 },
      { label: "日常维护任务", value: 2 },
      { label: "管道修复任务", value: 3 },
      { label: "违法任务", value: 4 },
    ],
    span: 5,
  },
  {
    label: "任务等级",
    prop: "grade",
    type: "select",
    option: [
      { label: "紧急", value: 1 },
      { label: "高", value: 2 },
      { label: "中", value: 3 },
      { label: "低", value: 4 },
    ],
    span: 5,
  },
  {
    label: "",
    prop: "",
    type: "button",
    btns: [
      { label: "查询", event: "submit", type: "success" },
      { label: "重置", event: "reset" },
    ],
    span: 4,
  },
]);
const formRef = ref(null);
const submit = (data: any) => {
  formRef.value.checkForm().then((result) => {
    if (result) {
      where.value = { ...data };
    }
  });
};
const reset = (data: any) => {
  console.log(data);
  formRef.value.reset();
};

// 编辑表单配置
const editFormat = ref([
  {
    label: "任务名称",
    prop: "postCode",
    type: "input",
    span: 24,
  },
  {
    label: "巡检人",
    prop: "postCode",
    type: "input",
    span: 24,
  },
  {
    label: "任务区域",
    prop: "status",
    type: "select",
    option: [
      { label: "肖家河流域", value: 0 },
      { label: "跳蹬河流域", value: 1 },
    ],
    span: 24,
  },
  { label: "查询时间", prop: "postName", type: "date-range", span: 24 },
  {
    label: "巡检方式",
    prop: "status",
    type: "select",
    option: [
      { label: "人工巡检", value: 0 },
      { label: "跳蹬河流域", value: 1 },
    ],
    span: 24,
  },
  {
    label: "备注",
    prop: "postCode",
    type: "input",
    span: 24,
  },
  {
    label: "",
    prop: "",
    type: "button",
    btns: [{ label: "选取范围", event: "selectRange", type: "success" }],
    span: 24,
  },
]);
const selectRange = () => {
  popRef.value.hide();
};
const confirm = () => {
  console.log("111");
  editFormRef.value.checkForm().then((result) => {
    if (result) {
      //内部执行提交逻辑
    }
  });
};
onMounted(() => {
  console.log(2222, "页面中", map);
});
</script>
  <style scoped>
.contain {
  width: 95%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  position: absolute;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  overflow: hidden;
  padding: 20px;
  border-radius: 20px;
}
</style>